<template>
  <div class="report">
    <div class="report-title">
      <span>
        {{ data[0].title }}
      </span>
      <div style="margin: 0px 10px;">
        <el-tooltip effect="light" content="按住`Shift`键进行上下滚动可实现左右查看表格" placement="right">
          <el-button type="info" circle size="small">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-table :data="data[0].report" style="width: 100%" v-loading="loading">
      <el-table-column v-for="prop in data[0].props" :key="prop[0]" :prop="prop[0]" :label="prop[1]"
        :min-width="{ idx: '80', dw: '80', item: '180', total: '120' }[prop[0]]" fixed="left">
      </el-table-column>
      <el-table-column v-for="label in data[0].labels" :key="label[0]" :label="label[1]">
        <el-table-column v-for="i in label[2]" :key="i" :prop="label[0] + '_' + i" :label="i + ''" width="90">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { reactive, ref } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { apiAllReports } from "../apis/apis.js";
import { raw_data } from "../tableData/data.js";
import allParams from "../utils/sendParams.js";
import { QuestionFilled } from '@element-plus/icons-vue'
const route = useRoute();
const router = useRouter();

console.log(route.params);

const id = ref(route.params.id - 1);

const transform = (data) => {
  for (let i in data.report) {
    for (let j in data.labels) {
      for (let k = 0; k < data.labels[j][2].length; k++) {
        data.report[i][data.labels[j][0] + "_" + data.labels[j][2][k]] =
          data.report[i][data.labels[j][0]][k];
      }
    }
  }
  return data;
};
const data = ref([{ title: "" }]);
const raw_data_ref = ref(raw_data);
const sendData = ref(allParams(raw_data_ref.value));
const apis = apiAllReports;
const loading = ref(false);
const getReport = (raw_data, idx) => {
  // console.log("raw_data ", raw_data);
  loading.value = true;
  apis(raw_data)
    .then((res) => {
      console.log("OK ", res);
      if (res.code === 200) {
        data.value = [transform(res.obj[idx])];
        loading.value = false;
      } else {
        ElMessage({
          message: "参数计算错误",
          grouping: true,
          type: "error",
        });
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "参数计算错误",
        grouping: true,
        type: "error",
      });
    });
};

onMounted(() => {
  console.log(" onMounted : ", route.params);
  getReport(sendData.value, route.params.id - 1);
});
</script>

<style>
.report {
  margin: 10px;
}

.report-title {
  margin: 0 0px 10px 0;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
}
</style>